<template>
  <el-breadcrumb separator="/" style="margin: 20px 20px 20px 20px">
    <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
    <el-breadcrumb-item>协同指挥决策</el-breadcrumb-item>
    <el-breadcrumb-item>事件总结评估</el-breadcrumb-item>
    <el-breadcrumb-item>{{ breadcrumbName }}</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="content-body">
    <div class="left-content">
      <el-form
        :model="formData"
        autocomplete="off"
        :rules="rules"
        label-position="right"
        label-width="135px"
      >
        <div class="row-title">
          <!-- <div class="title-line"></div> -->
          <div class="title">事件流程追踪</div>
        </div>
        <template v-for="(item, i) in infoData.dispositionList" :key="i">
          <div class="row-title">
            <div
              v-if="i == 0"
              class="title-circle"
              style="
                background-color: #e0f2ff;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <el-icon color="#2F7DF1" size="22">
                <Check />
              </el-icon>
            </div>
            <div class="title-circle" v-else></div>
            <div class="title">
              <div class="title-text">事件处置</div>
              <div class="title-content">
                {{ `${item.createTime} ${item.creator.name}` }} 处置
              </div>
            </div>
          </div>
          <div class="row-content row-content-border">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="处置过程：">
                  <span>{{ item.handleProcess }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处置人：">
                  <span>{{ item.creator.name }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="协同人：">
                  <span v-for="(item2, i) in item.person || []" :key="i"
                    >{{ item2.name }};</span
                  >
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处置结果：">
                  <span>{{
                    item.handleResult == 1 ? "已完结" : "处置中"
                  }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="附件：">
                  <upload-files
                    disabled
                    v-model="item.files"
                    :accept="[
                      'jpg',
                      'jpeg',
                      'png',
                      'gif',
                      'bmp',
                      'svg',
                      'doc',
                      'docx',
                    ]"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- </div> -->
        </template>
        <div class="row-title">
          <div class="title-circle"></div>
          <div class="title">
            <div class="title-text">事件接收</div>
            <div class="title-content">
              {{
                `${infoData.receiveObj.createTime} ${infoData.receiveObj?.creator?.name}`
              }}
              接收
            </div>
          </div>
        </div>
        <div class="row-content row-content-border">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="接收人：">
                <span>{{ infoData.receiveObj?.creator?.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接收时间：">
                <span>{{ infoData.receiveObj.createTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="row-title">
          <div class="title-circle"></div>
          <div class="title">
            <div class="title-text">事件响应并下发</div>
            <div class="title-content">
              {{
                `${infoData.approve.createTime} ${infoData.approve.creator?.name}`
              }}
              分析并响应
            </div>
          </div>
        </div>
        <div class="row-content row-content-border">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="事件级别：">
                <span>{{
                  handleTranslate(eventLevel, infoData.approve.eventLevel)
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="区域处置单位：">
                <span>{{ infoData.approve?.processGroup?.name }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="附件上传：">
                <upload-files
                  disabled
                  v-model="infoData.approve.files"
                  :accept="[
                    'jpg',
                    'jpeg',
                    'png',
                    'gif',
                    'bmp',
                    'svg',
                    'doc',
                    'docx',
                  ]"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="row-title">
          <div class="title-circle" style="background-color: #ddd"></div>
          <div class="title">
            <div class="title-text">事件上报</div>
            <div class="title-content">
              {{
                `${infoData.report.createTime} ${infoData.report.creator?.name}`
              }}
              上报
            </div>
          </div>
        </div>
        <div class="row-content">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="发生区域：">
                <span>{{
                  handleTranslate(platformList, infoData.report.terminal)
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事件地点：">
                <span>{{ infoData.report.location }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="事件类型：">
                <span>{{
                  findTypeName(eventTypes, infoData.report.eventTypeId)?.join(
                    " - "
                  )
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="事件描述：">
                <span>{{ infoData.report.description }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="发现时间：">
                <span>{{ infoData.report.eventTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="后果/影响：">
                <span>{{
                  handleTranslate(consequence, infoData.report.result)
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事件级别：">
                <span>{{
                  handleTranslate(eventLevel, infoData.report.eventLevel)
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="处置单位：">
                <span>{{ infoData.report?.processGroup?.name }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="附件上传：">
                <upload-files
                  disabled
                  v-model="infoData.report.files"
                  :accept="[
                    'jpg',
                    'jpeg',
                    'png',
                    'gif',
                    'bmp',
                    'svg',
                    'doc',
                    'docx',
                  ]"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="right-content">
      <el-form
        ref="formRef"
        :model="formData"
        autocomplete="off"
        :rules="rules"
        label-position="right"
        label-width="155px"
      >
        <template v-if="route.query.status == 30">
          <div class="row-content" style="height: calc(100% - 110px)">
            <div class="row-title">
              <!-- <div class="title-line"></div> -->
              <div class="title">事件总结评估</div>
            </div>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="领导批示：" prop="leaderDesc">
                  <el-input
                    v-model="formData.leaderDesc"
                    maxlength="500"
                    show-word-limit
                    :rows="3"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="现场反馈：" prop="onSiteFeed">
                  <el-input
                    v-model="formData.onSiteFeed"
                    maxlength="500"
                    show-word-limit
                    :rows="3"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="事件处理方式评估：" prop="eventHandMethod">
                  <el-input
                    v-model="formData.eventHandMethod"
                    maxlength="500"
                    show-word-limit
                    :rows="3"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item
                  label="事件处理过程评估："
                  prop="eventHandProcess"
                >
                  <el-input
                    v-model="formData.eventHandProcess"
                    maxlength="500"
                    show-word-limit
                    :rows="3"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="总结评估：" prop="sumEstimate">
                  <el-input
                    v-model="formData.sumEstimate"
                    maxlength="500"
                    show-word-limit
                    :rows="3"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="分析评估：" prop="analyEstimate">
                  <el-input
                    v-model="formData.analyEstimate"
                    maxlength="500"
                    show-word-limit
                    :rows="3"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="备注：">
                  <el-input
                    v-model="formData.remark"
                    maxlength="500"
                    show-word-limit
                    :rows="3"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="总结评估报告：">
                  <upload-files
                    v-model="formData.reportArr"
                    :accept="[
                      'jpg',
                      'jpeg',
                      'png',
                      'gif',
                      'bmp',
                      'svg',
                      'doc',
                      'docx',
                    ]"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="其他附件：">
                  <upload-files
                    :limit="2"
                    v-model="formData.otherAnnex"
                    :accept="[
                      'jpg',
                      'jpeg',
                      'png',
                      'gif',
                      'bmp',
                      'svg',
                      'doc',
                      'docx',
                    ]"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="bottom-btn">
            <el-button plain @click="router.go(-1)">取消</el-button>
            <el-button
              type="primary"
              style="margin-left: 50px"
              @click="handleEstimateConfirm(0)"
              :loading="loadingBtn"
              >确定</el-button
            >
            <el-button
              type="primary"
              style="margin-left: 50px"
              @click="handleEstimateConfirm(1)"
              :loading="loadingBtn"
              >事件转知识库</el-button
            >
          </div>
        </template>
        <template v-if="route.query.status == 31 || route.query.status == 40">
          <div class="row-content" style="height: calc(100% - 110px)">
            <div class="row-title">
              <!-- <div class="title-line"></div> -->
              <div class="title">事件总结评估</div>
            </div>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="领导批示：" prop="leaderDesc">
                  <span>{{ formData.leaderDesc }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="现场反馈：" prop="onSiteFeed">
                  <span>{{ formData.onSiteFeed }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="事件处理方式评估：" prop="eventHandMethod">
                  <span>{{ formData.eventHandMethod }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item
                  label="事件处理过程评估："
                  prop="eventHandProcess"
                >
                  <span>{{ formData.eventHandProcess }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="总结评估：" prop="sumEstimate">
                  <span>{{ formData.sumEstimate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="分析评估：" prop="analyEstimate">
                  <span>{{ formData.analyEstimate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="备注：">
                  <span>{{ formData.remark }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="总结评估报告：">
                  <span>
                    <upload-files
                      disabled
                      v-model="formData.report"
                      :accept="[
                        'jpg',
                        'jpeg',
                        'png',
                        'gif',
                        'bmp',
                        'svg',
                        'doc',
                        'docx',
                      ]"
                    />
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="其他附件：">
                  <span>
                    <upload-files
                      disabled
                      v-model="formData.otherAnnex"
                      :accept="[
                        'jpg',
                        'jpeg',
                        'png',
                        'gif',
                        'bmp',
                        'svg',
                        'doc',
                        'docx',
                      ]"
                    />
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
          
          </div>
            <div class="bottom-btn">
              <el-button plain @click="router.go(-1)">返回</el-button>
            </div>
        </template>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onBeforeMount, computed } from "vue";
import { useStore } from "vuex";
import {
  reportInfo,
  approveInfo,
  getTree,
  getConsequence,
} from "@/api/collaborativeCommand/eventEscalation";
import {
  dispositionInfo,
  receiveInfo,
} from "@/api/collaborativeCommand/collaborativeDisposal";
import {
  estimateConfirm,
  getEstimate,
} from "@/api/collaborativeCommand/summaryEvaluation";
import { getResource } from "@/api/resource";
import uploadFiles from "@/components/UploadFiles/index.vue";
import { handleTranslate, findTypeName } from "../components/common.js";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const formData = reactive({
  otherAnnex: [],
  report: {},
  reportArr: [],
}); //表单数据
const formRef = ref(); //表单ref
const rules = reactive({
  leaderDesc: [{ required: true, message: "请输入领导批示", trigger: "blur" }],
  onSiteFeed: [{ required: true, message: "请输入现场反馈", trigger: "blur" }],
  eventHandMethod: [
    { required: true, message: "请输入事件处理方式评估", trigger: "blur" },
  ],
  eventHandProcess: [
    { required: true, message: "请输入事件处理过程评估", trigger: "blur" },
  ],
  sumEstimate: [
    { required: true, message: "请输入事件总结评估", trigger: "blur" },
  ],
  analyEstimate: [
    { required: true, message: "请输入事件分析评估", trigger: "blur" },
  ],
});
const infoData = reactive({
  //页面展示信息
  report: {}, //上报信息
  approve: {}, //响应信息
  receiveObj: {}, //接收信息
  dispositionList: [], //处置信息
});

const loadingBtn = ref(false);

// 数据字典
const platformList = ref([]); //发生区域
const eventTypes = ref([]); //事件类型
const eventUrgency = ref([]); //事件紧急程度
const consequence = ref([]); //后果/影响
const eventLevel = ref([]); //事件级别

// 用户信息
const store = useStore();
const userInfo = computed(() => store.state.user.userInfo);
const creator = reactive({
  id: userInfo.value.userId,
  name: userInfo.value.name,
  organId: userInfo.value.organId,
  organName: userInfo.value.organName,
});

// 面包屑
const breadcrumbName = computed(() => {
  const { status } = route.query;
  if (status == 30) {
    return "评估完结事件";
  } else if (status == 31 || status == 40) {
    return "查看完结事件处置";
  }
});
/**
 *事件总结评估确认/事件转知识库
 */
const handleEstimateConfirm = (isConfirm) => {
  formRef.value.validate((valid) => {
    if (valid) {
      loadingBtn.value = true;
      const obj = { ...formData };
      if (obj.reportArr.length > 0) {
        obj.report = obj.reportArr[0];
      }
      delete obj.reportArr;
      estimateConfirm({
        ...obj,
        creator,
        eventReportId: route.query.id,
        isConfirm,
      })
        .then((res) => {
          if (res.code === "1") {
            router.go(-1);
          } else {
            ElMessage.error(res.message);
          }
          loadingBtn.value = false;
        })
        .catch((err) => {
          loadingBtn.value = false;
          ElMessage.error(err.message);
        });
    }
  });
};

/**
 * 获取事件上报信息  响应信息  接收信息  处置信息
 */
const loadData = () => {
  Promise.all([
    reportInfo(route.query.id),
    approveInfo({ id: route.query.id }),
    receiveInfo({ id: route.query.id }),
    dispositionInfo({ id: route.query.id }),
  ])
    .then(([res1, res2, res3, res4]) => {
      if (
        res1.code == 1 &&
        res2.code == 1 &&
        res3.code == 1 &&
        res4.code == 1
      ) {
        infoData.report = res1.data || {};
        infoData.approve =
          res2.data.filter((item) => item.status == 20)[0] || {};
        infoData.receiveObj = res3.data[0] || {};
        infoData.dispositionList = res4.data?.reverse() || [];
      }
    })
    .catch((err) => {
      ElMessage.error(err.message || "数据获取失败");
    });
};
// 获取事件评估信息
const handleEstimate = () => {
  getEstimate(route.query.id)
    .then((res) => {
      Object.assign(formData, res.data);
      formData.report = formData.report ? [formData.report] : [];
    })
    .catch((err) => {
      ElMessage.error(err.message || "数据获取失败");
    });
};
/**
 * 加载数据字典
 */
const loadDict = () => {
  Promise.all([
    getResource("terminals"),
    getResource("event_rules_exigency_level"),
    getResource("event_rules_event_level"),
    getTree(),
    getConsequence({ enabled: 1 }),
  ]).then(([res1, res2, res3, res4, res5]) => {
    platformList.value = res1.data.properties.meta;
    eventUrgency.value = res2.data.properties.meta;
    eventLevel.value = res3.data.properties.meta;
    eventTypes.value = res4.data;
    consequence.value = res5.data?.map((item) => {
      return {
        value: item.id,
        label: item.result,
      };
    });
  });
};
const initData = () => {
  loadData();
  loadDict();
  if (route.query.status == 31 || route.query.status == 40) {
    handleEstimate();
  }
};
onBeforeMount(initData);
</script>

<style lang="less" scoped>
.content-body {
  padding: 0 60px;
  background-color: white;
  // min-height: 100%;
  height: calc(100% - 54px);
  margin-left: 10px;
  display: flex;

  .left-content {
    flex: 5;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .right-content {
    flex: 3;
    height: 100%;
    overflow: hidden;

    form {
      height: 100%;

      .row-content {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
      }
    }

    // overflow-y: auto;
    // overflow-x: hidden;
    // padding-left: 20px;
  }

  // 左右公用
  .row-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 20px;

    .title-line {
      height: 12px;
      background-color: #337eca;
      width: 2px;
      margin-top: 2px;
    }

    .title-circle {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      background-color: #2f7df1;
    }

    .title {
      margin-left: 10px;

      .title-text {
        color: #353a42;
        font-size: 16px;
        margin: 10px 0;
        font-weight: bold;
      }

      .title-content {
        font-size: 8px;
        color: #999;
      }
    }
  }

  .row-content {
    padding-top: 20px;
    margin-left: 20px;
  }

  .row-content-border {
    border-left: 1px solid #ddd;
  }

  .bottom-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding-bottom: 30px;
  }
}
</style>
